<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        body {
            background-color: #000;
        }


        div {
            width: 100px;
            height: 100px;
            background-color: transparent;
            position: absolute;
            left: calc(50% - 50px);
            top: calc(50% - 50px);
            border: 1px solid #fff;

            /* box-shadow: inset 0px 0px 0px 0px #0ff; */
            /* inset 内阴影 */
            /* 大小为除了盒子之外的区域，在盒子内部展示 */
            /* 同样在背景颜色之前 */
            /* 传播距离向内扩散，各个值的意义不变 */

            /* box-shadow: 0px 0px 0px 0px #0ff; */
            /* 不能写outset，不写就是outset 外阴影 */
            /* 水平偏移 垂直偏移 模糊半径 传播/扩大距离 */
            /* 外阴影，大小和盒子一样大在背景颜色的上面*/
            /* 外阴影会被盒子挡住，也就是只能出现在盒子的外部区域，盒子背景透明却可以看到后面的颜色 */
            /* 水平偏移和垂直偏移为负值代表反方向偏移 */
            /* 传播距离为5px代表四周同时向外延伸5px，这样水平总体相当于增加了10px */
            /* 模糊半径为5px代表从阴影边缘(扩大之后的边界)向两边同时模糊，半径越大，整体越虚 */

    
            box-shadow: 3px 0px 10px #f0f,
                        inset 0px 0px 10px #fff,
                        0px -3px 10px #0ff,
                        -3px 0px 10px #00f,
                        0px 3px 10px #ff0;
            /* 同时设置多个阴影，先设置的在z轴的上面 */
            /* 即使设置多个同样的阴影，也有用，可以使模糊的颜色加重 */
        }
        


    </style>
</head>
<body>
    <div></div>
</body>
</html>